@import url(./base.less);
@import url(./normalize.less);
@rootSize:37.5rem;
header{
  height: (42 / @rootSize);
  
  padding:(10 / @rootSize) (15 / @rootSize) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
 background-color: #fff;
.posit{
    font-size: (16 / @rootSize);
  }
.hedaer-search{
  margin-left: (20 / @rootSize);
  width: (240 / @rootSize);
  background-color: #f7f7f7;
  border-radius: (16 / @rootSize);
  display: flex;
  align-items: center;
  height: 100%;
  i{margin-left: (16 / @rootSize);}
  button{
    margin-left:(22 / @rootSize);
    height: 100%;
    border: 0;
    font-size: (12 / @rootSize);
    background-color: #f7f7f7;
  }
}
.header-pic{
  margin-left: (26 / @rootSize);
  height:(26 / @rootSize);
  margin-bottom: (6 / @rootSize);
}
}
.banner{
  // background-color: pink;
  height: (130 / @rootSize);
  margin: (7 / @rootSize) (15 / @rootSize);
  margin-top: (47 / @rootSize);
}
.nav{
  height: (100 / @rootSize);
  margin: (12 / @rootSize) (15 / @rootSize) (36 / @rootSize);
  display: flex;
  justify-content: space-between;
  .nav-one{
    height: 100%;
    width: (167 / @rootSize);
  }
  .nav-two{
    height: 100%;
    width: (167 / @rootSize);
  }
}
.pre{
  height: (18 / @rootSize);
  margin: 0 (15 / @rootSize) (15 / @rootSize);
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}
.cont{
  height: (260 / @rootSize);
  margin: (30 / @rootSize) (15 / @rootSize) (30 / @rootSize);
  // background-color: pink;
  .cont-top{
    display: flex;
    justify-content: space-between;
    .cont-left{
      width: (167 / @rootSize);
      height: (150 / @rootSize);
    }
    .cont-right{
      width: (167 / @rootSize);
      height: (150 / @rootSize);
    }

  }
  .cont-bottom{
    display: flex;
    justify-content: space-between;
    .text-left{
      width:(167 / @rootSize);
      .text-left-one{
        font-size: (14 / @rootSize);
        margin-top: (12 / @rootSize);
      }.text-left-two{
        font-size: (12 / @rootSize);
        margin-top: (8 / @rootSize);
        color: #999999;
      }.text-left-three{
        font-size: (14 / @rootSize);
        margin-top: (12 / @rootSize);
        color: #f39800;
        font-weight: 600;
      }
    }
    .text-right{
      width:(167 / @rootSize);
      .text-left-one{
        font-size: (14 / @rootSize);
        margin-top: (12 / @rootSize);
      }.text-left-two{
        font-size: (12 / @rootSize);
        margin-top: (8 / @rootSize);
        color: #999999;
      }.text-left-three{
        font-size: (14 / @rootSize);
        margin-top: (12 / @rootSize);
        color: #f39800;
        font-weight: 600;
      }
    }
  }
}
.ggwei{
  margin: 0 (15 / @rootSize) (36 / @rootSize);
  height: (56 / @rootSize);
}
.recommend{
  margin:0 (15 / @rootSize) (24 / @rootSize) ;
  display: flex;
  justify-content: space-between;
  font-size: (18 / @rootSize);
  font-weight: 600; 
  .recommend-right{
    width: (100 / @rootSize);
    display: flex;
    justify-content: space-between;
    margin-right: (10 / @rootSize);
    .rec-one{
      font-size: (16 / @rootSize);
      .rec-one-bottom{
        width: (10 / @rootSize);
        height: (4 / @rootSize);
        background-color: #14a3ef;
        margin-left: (10 / @rootSize);
        border-radius: (2 / @rootSize);
      }
    }.rec-two{
      font-size: (16 / @rootSize);
      color: #999999;
      padding-bottom:(4 / @rootSize);
    }
  }

}
.baoli{
  margin: 0 (15 / @rootSize) (28 / @rootSize);
  height: (140 / @rootSize);
  display: flex;
  justify-content: space-between;
  .baoli-left{
    width: (100 / @rootSize);
    height: (112 / @rootSize);
  }
  .baoli-right{
    .baoli-one{
      font-size: (16 / @rootSize);
      font-weight: 600;
      margin-bottom: (8 / @rootSize);
    }
    .baoli-two{
      font-size: (12 / @rootSize);
      color: #999999;
      margin-bottom: (8 / @rootSize);
    }
    .baoli-three{
      display: flex;
      justify-content: space-between;
      width: (130 / @rootSize);

      .three-left{
        height: (22 / @rootSize);
        width: (60 / @rootSize);
        // background-color: blue;
        font-size: (12 / @rootSize);
        line-height: (22 / @rootSize);
        text-align: center;
        border: (1 / @rootSize) solid #999999;
        border-radius: (5 / @rootSize);
        color: #999999;
        margin-bottom: (8 / @rootSize);
      }
    }
    .baoli-four{
      margin-top: (8 / @rootSize);
      .four-left{
        font-size: (18 / @rootSize);
        font-weight: 600;
        color: #f39800;
        
      }.four-right{
        font-size: (12 / @rootSize);
        color: #f39800;
      }
    }
  }
}
.look{  
  width: (260 / @rootSize);
  height: (38 / @rootSize);
  margin: 0 (57 / @rootSize) (24 / @rootSize);
  font-size: (14 / @rootSize);
  line-height: (38 / @rootSize);
  text-align: center;
  border-radius: (19 / @rootSize);
  background-color: #f2f2f3;
  a{
    color: #999999;
  }
}
.story{
  height: (85 / @rootSize);
  margin: 0 (15 / @rootSize) (12 / @rootSize);
  margin-bottom: (60 / @rootSize);

}
.navbottom{
  height: (50 / @rootSize);
  width: 100%;
  position: fixed;
  background-color: #f2f2f3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1;
  left: 0;
  bottom: 0;
  .nav-one{
    .nav-one-top{
      width: (20 / @rootSize);
      height: (20 / @rootSize);
      margin-left: (4 / @rootSize);
    }
    .nav-one-bottom{
      font-size: (14 / @rootSize);
     margin-top: (10 / @rootSize);
    }
  }
  .nav-two{
    .nav-two-top{
      width: (20 / @rootSize);
      height: (20 / @rootSize);
      margin-left: (16 / @rootSize);
    }
    .nav-one-bottom{
      font-size: (14 / @rootSize);
     margin-top: (10 / @rootSize);
    }
  }
}


